<template>
  <div class="app-container">
    <div style="display: flex;flex-flow: row nowrap;margin-left: 9%">
      <div style="border:1px;background-color: #4e8dff; width: 6px;height: 20px"></div>
      <span style="margin-left: 10px">查看审核信息</span>
    </div>
    <el-form ref="form" v-loading="formLoading" :model="form" label-width="140px"
             style="margin-left: 25%;" disabled>
      <el-row>
        <el-col :span="16">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="form.userName" maxlength="30"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="手机号" prop="phonenumber">
            <el-input  autocomplete='new-password' v-model="form.phonenumber" show-word-limit maxlength="11"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="登录密码" prop="password">
            <el-input autocomplete='new-password' value="********" type="password" maxlength="20"
                      show-password/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="工号" prop="jobNumber">
            <el-input v-model="form.jobNumber"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="劳动关系所在单位" prop="relationUnitId">
            <el-input v-model="relationUnitName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="现工作单位" prop="nowUnitId">
            <el-input v-model="nowUnitName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="部门" prop="deptId">
            <el-input v-model="deptName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="职务" prop="dutyName">
            <el-input v-model="form.dutyName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="入职时间" prop="entryTime">
            <el-date-picker
              v-model="form.entryTime"
              type="date"
              :picker-options="datePickerValid"
              style="width: 100%;"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="身份证号" prop="idcard">
            <el-input v-model="form.idcard"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio
                v-for="dict in dict.type.sys_user_sex"
                :key="dict.value"
                :label="dict.value"
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="用工形式" prop="employType">
            <el-select v-model="form.employType" clearable style="width: 100%">
              <el-option
                v-for="dict in dict.type.sys_employ_type"
                :key="dict.value"
                :label="dict.label"
                :value="Number(dict.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="政治面貌" prop="politicsOutlook">
            <el-input v-model="form.politicsOutlook"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="入党时间" prop="joinPoliticalTime">
            <el-date-picker
              v-model="form.joinPoliticalTime"
              type="date"
              :picker-options="datePickerValid"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="审核意见" prop="approveStatus">
            <el-radio-group v-model="form.approveStatus" @change="approveStatusChangeHandler">
              <el-radio
                v-for="dict in dict.type.sys_user_appr_opeator"
                :key="dict.value"
                :label="Number(dict.value)"
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="showOppinionBool">
        <el-col :span="16">
          <el-form-item label="驳回原因" prop="rejectReason">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入驳回原因"
              v-model="form.rejectReason"
              maxlength="200"
              show-word-limit>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!showOppinionBool">
        <el-col :span="16">
          <el-form-item label="上级主管" prop="superiorId">
            <el-input v-model="form.superiorName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!showOppinionBool">
        <el-col :span="16">
          <el-form-item label="所属角色" prop="roleIds">
            <el-select v-model="form.roleIds" multiple style="width: 100%">
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
                :disabled="item.status == 1"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!showOppinionBool">
        <el-col :span="16">
          <el-form-item label="用户标签" prop="userTip">
            <el-select v-model="form.userTip" multiple clearable style="width: 100%">
              <el-option
                v-for="val in userTipOptions"
                :key="val.id"
                :label="val.name"
                :value="val.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!showOppinionBool">
        <el-col :span="16">
          <el-form-item label="用户类型" prop="userCategory">
            <el-select v-model="form.userCategory" multiple clearable style="width: 100%">
              <el-option
                v-for="val in userCategoryOptions"
                :key="val.value"
                :label="val.label"
                :value="val.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!showOppinionBool">
        <el-col :span="16">
          <el-form-item label="数据权限" prop="dataAuthType">
            <el-radio-group v-model="form.dataAuthType" @change="dataAuthTypeChangeHandler">
              <el-radio
                v-for="dict in dict.type.sys_data_auth"
                :key="Number(dict.value)"
                :label="Number(dict.value)"
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!showOppinionBool &&showDataAuthBool">
        <el-col :span="16">
          <el-form-item label="" prop="dataAuthId">
            <el-input v-model="dataAuthNames" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!showOppinionBool">
        <el-col :span="16">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.value"
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <appr-records ref="apprRecordsRef" :userId="userId"></appr-records>
    <div style="margin: 2% auto auto 40%;">
      <el-button class="form_button_item" @click="closeBtnHandler">返回</el-button>
    </div>
  </div>
</template>

<script>
import {getUser} from "@/api/system/user";
import {listTip} from "@/api/system/tip/tipApi";
import userPicker from "@/views/system/user/picker/index";
import apprRecords from "@/views/system/user/appr/apprRecords";
import {listRole} from "@/api/system/role";
import {userApprove} from "@/api/system/userAppr";

export default {
  name: "View",
  dicts: ['sys_normal_disable', 'sys_user_sex', 'sys_employ_type', 'sys_user_category', 'sys_data_auth', 'sys_user_appr_opeator'],
  components: {userPicker,apprRecords},
  data() {
    return {
      datePickerValid: {
        disabledDate(time) {
          return time.getTime() >= Date.now();
        }
      },
      formLoading: false,
      showDataAuthBool: false,
      deptPickerOpen: false,
      userId: undefined,
      form: {},
      userCategoryOptions:[],
      // 部门树选项
      deptOptions: [],
      deptName:'',
      nowUnitName:'',
      relationUnitName:'',
      dataAuthNames:'',
      // 用户选项
      userTipOptions: [],
      // 默认密码
      initPassword: undefined,
      // 角色选项
      roleOptions: [],
      saveBtnLoading: false,
      showOppinionBool: false,
    }
  },
  created() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.reset();
      listRole(this.addDateRange({
        pageNum: 1,
        pageSize: 1000,
      })).then(response => {
        this.roleOptions = response.rows;
        this.getSysUserTip();
        this.getUserCategory();
      })
      this.userId = this.$route.query.id;
      this.getUserInfo();
    },
    getUserInfo() {
      this.reset();
      if (this.userId) {
        this.formLoading = true;
        getUser(this.userId).then(response => {
          this.form = response.data;
          if (response.data.dataAuthType === 1) {
            this.showDataAuthBool = true
          } else {
            this.showDataAuthBool = false
          }
          if(this.form.approveStatus >0){
            this.showOppinionBool = false;
          }else{
            this.showOppinionBool = true;
          }
          this.relationUnitName=response.data.relationUnitName
          this.nowUnitName=response.data.nowUnitName
          this.deptName=response.data.deptName
          this.dataAuthNames=response.data.dataAuthNames
          if (response.roles) {
            this.form.roleIds = response.roleIds
          }
          if (response.userTips) {
            this.form.userTip = response.userTips
          }
          if (this.form.userCategory) {
            this.form.userCategory = this.form.userCategory.split(",");
          }
          // 编辑初始化值
          // this.$refs.userPickerRef.getAllUserList([this.form.superiorName])
        }).finally(() => {
          this.formLoading = false;
        })
      }
    },
    getSysUserTip() {
      listTip().then(resp => {
        this.userTipOptions = resp.rows;
      })
    },
    getUserCategory() {
      this.userCategoryOptions = this.dict.type.sys_user_category
    },
    // 表单重置
    reset() {
      this.form = {
        userName: undefined,
        phonenumber: undefined,
        addPassword: undefined,
        editPassword: undefined,
        password: undefined,
        jobNumber: undefined,
        relationUnitId: undefined,
        nowUnitId: undefined,
        deptId: undefined,
        dutyName: undefined,
        entryTime: undefined,
        idcard: undefined,
        sex: "0",
        employType: undefined,
        politicsOutlook: undefined,
        joinPoliticalTime: undefined,
        superiorId: undefined,
        superiorName: undefined,
        userTip: undefined,
        userCategory: undefined,
        dataAuthType: undefined,
        dataAuthId: undefined,
        rejectReason:'',
        status: "0",
        roleIds: [],
        approveStatus: undefined,
        apprStatusTemp:undefined
      };
      this.resetForm("form");
    },
    dataAuthTypeChangeHandler(data) {
      if (data > 0) {
        this.showDataAuthBool = true;
      } else {
        this.showDataAuthBool = false;
        this.form.dataAuthId = undefined
      }
    },
    closeBtnHandler() {
      // 关闭当前页面
      this.$tab.closeOpenPage();
      // 刷新列表页面
      this.$tab.refreshPage({path: "/manager/appr"});
    },
    approveStatusChangeHandler(data) {
      if (data < 0) {
        this.showOppinionBool = true;
      } else {
        this.showOppinionBool = false;
        this.form.rejectReason = ''
      }
    }
  }
}
</script>

<style scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #606266;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  color: #606266;
}
::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  background-color: #fff;
  color: #606266;
}
</style>
